<template>
	<div class="mine-content" style="margin-top: 0;">
		<ul class="order-list">
			<li v-for="(item,index) in list" :key=index @click="clickBtn(item.carNo,item.orderNo,item.enterStatus)">
				<p class="first_p">
					<span>{{item.carNo}}</span>
				</p>
				<p class="em_p">
					<span>{{item.weight?item.weight:0}}<em>吨</em></span>
				</p>
				<p class="second_p">
					<span class="time">{{item.uploadTime.slice(0,19)}}</span>
				</p>
				<p class="third_p">
					<span class="confirm" :class="item.confirmEnterStatus | fnName">{{item.confirmEnterStatus==0?'未确认':'已确认'}}</span>
					<span class="enter" :class='item.enterStatus | fnName'>{{item.enterStatus==0?'未入场':item.enterStatus==1?'已入场':item.enterStatus==2?'可出场':item.enterStatus==3?'已出场':'待入场'}}</span>
				</p>
				<img src="../../images/right.png">
			</li>
		</ul>
	</div>
</template>

<script>
	import {
		getTransInfoList
	} from '../../config/api'
	import {
		getStore
	} from '../../config/mUtils'
	export default {
		data() {
			return {
				orderNo: this.$route.query.orderNo,
				list: []
			}
		},
		mounted() {
			getTransInfoList(getStore('SupplierId'), this.orderNo).then(res => {
				console.log(res)
				if (res.code == 100) {
					this.list = res.content
				}
			}).catch(err => console.log(err))
		},
		methods: {
			clickBtn(carNo,orderNo,status) {
				if(status==0){
					this.$router.push({
						path:'transportInfor',
						query:{
							carNo,
							orderNo
						}
					})
				}else{
					this.$router.push({
						path:'LooktransportInformation',
						query:{
							carNo,
							orderNo
						}
					})
				}
			}
		},
		filters: {
			fnName(value) {
				if (value == 0) {
					return "firstColor"
				}
				if (value == 1) {
					return "thirdColor"
				}
				if (value == 2 || value == 4) {
					return "secondColor"
				}
				if (value == 3) {
					return "fourColor"
				}
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.mine-content .order-list li .third_p {
		.firstColor {
			border: 1px solid #f65555;
			color: #f65555
		}

		.secondColor {
			border: 1px solid #fdb96e;
			color: #fdb96e
		}

		.thirdColor {
			border: 1px solid#28c81e;
			color: #28c81e
		}

		.fourColor {
			border: 1px solid #777777;
			color: #777777
		}
	}
</style>
